<!DOCTYPE html>
<html>
<head>
  <title>Sprite Collision</title>
  <script src="../../kontra.js"></script>
</head>
<body>
  <canvas id="game" width="600" height="400" style="background: #333331"></canvas>
  <script id="code">
    // initialize the game and setup the canvas
    let { canvas, context } = kontra.init();

    // create a custom sprite
    class CustomSprite extends kontra.SpriteClass {

      init(properties) {
        super.init(properties);

        // add custom properties
        this.color = 'green';
        this.altColor = 'red';
        this.width = 20;
        this.height = 40;
      }

      // create custom functions
      stripe() {
        let pos = 0;

        this.context.fillStyle = this.altColor;
        while (pos < this.height) {
          this.context.fillRect(0, pos, this.width, 10);

          pos += 20;
        }
      }

      // don't override the render function
      draw() {
        super.draw();
        this.stripe();
      }
    }

    window.sprite = new CustomSprite({
      x: 300,
      y: 200,
      anchor: {x: 0.5, y: 0.5}
    });

    sprite.render();
  </script>
  <script src="../prism/codeOutput.js"></script>
</body>
</html>